<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html{
        height: 100%;
        margin: 0px;
        background: #f1f1f1;
      }
      #container{
      	height: 75%;
      }
      .panel {
        background-color: #ddf;
        color: #333;
        border: 1px solid silver;
        box-shadow: 3px 4px 3px 0px silver;
        position: absolute;
        top: 10px;
        right: 5%;
        border-radius: 5px;
        overflow: hidden;
        line-height: 20px;
        width: 90%;
      }
      #input{
        width: 80%;
        height: 30px;
        border: 0;
        box-sizing: border-box;
        padding: 5px;
        margin: 0;
        float: left;
      }
      #btn{
      	margin: 0;
      	padding: 0;
      	float: left;
      	width: 20%;
      	height: 30px;
      }
      .page_bttome .text{
      	color: #FE6464;
      	font-size: 14px;
      	padding: 10px;
      	line-height: 1.5em;
      }
      .page_bttome .submit{
      	background: #089EFE;
      	color: #FFFFFF;
      	text-align: center;
      	margin: 5px 10px;
      	border-radius: 10px;
      	height: 40px;
      	line-height: 40px;
      }
      /*信息提示*/
			.prompt{
				width: 80%;
				background: rgba(0,0,0,0.7);
				color: #fff;
				font-size: 16px;
				line-height: 1.6em;
				border-radius: 5px;
				text-align: center;
				position: fixed;
				bottom: 10%;
				left: 8%;
				padding:8px 2%;
				display: none;
			    z-index: 3000;
			}
    </style>
    <title>选择地址</title>
    
  </head>
  <body>
   <div id="container" tabindex="0"></div>
   <div class ='panel'>
   		<div>
	     <input id = 'input' placeholder = '点击地图显示地址/输入地址显示位置' />
	     <input id="btn" type="button"  value="确定"/>
	     <div style="clear: both;"></div>
     </div>
     <div id = 'message'></div>
   </div>
   <div class="page_bttome">
   		<div class="text">请在地图上点选位置，或者在上方输入框中输入地址搜索后设置位置</div>
   		<div class="submit">提交地址</div>
   </div>
   <div class="prompt" id="prompt">您的网络不给力哦~~</div>
	<script type="text/javascript" src="../js/jquery-1.10.1.min.js" ></script>
	<script type="text/javascript" src="../js/get_url_parameter.js" ></script>
	<script type="text/javascript" src="../js/config.js" ></script>
   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.0&key=0d1d97cc66316b3fc35b0fca893f0d5b"></script>
   <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
   <script type="text/javascript"> 
   	var city_arr=""
   	var position_arr=[]
    var map, geolocation;
    //加载地图，调用浏览器定位服务
    map = new AMap.Map('container', {
        resizeEnable: true,
    });
    map.plugin('AMap.Geolocation', function() {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition:'RB'
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });

//选择地址
    AMap.plugin('AMap.Geocoder',function(){
        var geocoder = new AMap.Geocoder({
            city: "全国"//城市，默认：“全国”
        });
        var marker = new AMap.Marker({
            map:map,
            bubble:true
        })
        var input = document.getElementById('input');
         var btn = document.getElementById('btn');
        var message = document.getElementById('message');
        map.on('click',function(e){
            marker.setPosition(e.lnglat);
            geocoder.getAddress(e.lnglat,function(status,result){
              if(status=='complete'){
                 input.value = result.regeocode.formattedAddress
                 city_arr=result.regeocode.addressComponent.city
                 message.innerHTML = e.lnglat
                 position_arr=message.innerHTML.split(",")
              }else{
                 message.innerHTML = '无法获取地址'
              }
            })
        })
        
        input.onchange = btn.onclick= function(e){
            var address = input.value;
            geocoder.getLocation(address,function(status,result){
              if(status=='complete'&&result.geocodes.length){
                marker.setPosition(result.geocodes[0].location);
                city_arr=result.geocodes[0].addressComponent.city
                map.setCenter(marker.getPosition())
                message.innerHTML = marker.getPosition()
                position_arr=message.innerHTML.split(",")
              }else{
                message.innerHTML = '无法获取位置'
              }
            })
        }

    });
    
   </script>
   <script>
   	  var phone=request("phone");
   	  var device=request("from");
   		$(".submit").click(function(){
   			if($("#message").text()==""){
					$("#prompt").text("没有设置地址坐标");
			    $(".prompt").fadeIn(300,function(){
			        setTimeout(function(){$(".prompt").fadeOut(300)},3000)
			    })
			    return false;
   			}
   			if($("#input").val()==""){
					$("#prompt").text("没有设置地址名称");
			    $(".prompt").fadeIn(300,function(){
			        setTimeout(function(){$(".prompt").fadeOut(300)},3000)
			    })
			    return false;
   			}
   			$.ajax({
				    url: DATA_URL+"setdirveraddr",
				    data: "phone="+phone+"&area_str="+$("#input").val()+"&longitude="+position_arr[0]+"&latitude="+position_arr[1]+"&area="+city_arr,
				    type: "post",
				    dataType: 'json',
				    timeout: 5000,
				    success:function (data) {
				    	if(data.code=="0"){
					    		if(device=="app"){
										location.href="qicheng://go_back"
									}
					    		else{
					    			location.replace("place_pic.html?phone="+phone+"&from="+device)
					    		}
				    	}
						else{
							$("#prompt").text(data.msg);
				            $(".prompt").fadeIn(300,function(){
				                setTimeout(function(){$(".prompt").fadeOut(300)},3000)
				            })
						}
				    },
				    error:function () {
				    	$("#prompt").text("您的网络不给力哦~");
				        $(".prompt").fadeIn(300,function(){
				            setTimeout(function(){$(".prompt").fadeOut(300)},3000)
				        })
				    }
				});
   		})
   </script>
  
    
  </body>
</html>